import React, { useEffect, useState } from 'react';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import './tabbar.less'
import { useHistory } from 'react-router-dom'
import homeActive from '../../assets/tabbar/home_1.png'
import home from '../../assets/tabbar/home_2.png'
import fast from '../../assets/tabbar/fast.png'
import myActive from '../../assets/tabbar/my_1.png'
import my from '../../assets/tabbar/my_2.png'
// import moduleName from 'module'
const routers = ['/home', '/fast', '/user']


export default function SimpleBottomNavigation(props) {
    // 定义一个决定 tabbar是否显示的变量
    const [isShow, setIsShow] = useState(true)
    const [value, setValue] = useState(0);
    const history = useHistory()
    useEffect(() => {
        // switch (history.location.pathname) {
        //     case '/home':
        //         setValue(0)
        //         break;
        //     case '/fast':
        //         setValue(1)
        //         break;
        //     case '/user':
        //         setValue(2)
        //         break;
        // }
        const index = routers.indexOf(history.location.pathname)
        setValue(index)
        // 控制在不同页面下的显示与隐藏
        setIsShow(index !== - 1)
    }, [history.location.pathname])
    const changeFn = (event, newValue) => {
        setValue(newValue);
        history.push(routers[newValue])
    }
    return (
        <BottomNavigation
            style={{ display: isShow ? 'flex' : 'none' }}
            className='tab-bar'
            value={value}
            onChange={changeFn}
            showLabels
        >
            <BottomNavigationAction label="首页" icon={<img src={value === 0 ? homeActive : home} alt="" />} />
            <BottomNavigationAction label="快速刷题" icon={<img src={fast} alt="" />} />
            <BottomNavigationAction label="我的" icon={<img src={value === 2 ? myActive : my} alt="" />} />
        </BottomNavigation>
    );
}